<template>
	<div class="back">
		<div class="titleWra">
			<div class="titleItem" :class="{ active: count == 1 }" @click="count = 1">
				课程介绍
			</div>
			<div class="titleItem" @click="count = 2" :class="{ active: count == 2 }">
				评价
			</div>
			<div class="titleItem" @click="count = 3" :class="{ active: count == 3 }">
				购买售后
			</div>
		</div>
		<div class="detailWra">
			<template v-if="count == 1">
				<div class="contentWra">
					<div class="content">
						<div>兴趣技能</div>
						<div>:</div>
						<div class="pink">古典舞、</div>
						<div class="pink">中国舞</div>
					</div>
					<div class="content">
						<div>保障</div>
						<div>:</div>
						<div class="black">
							<span
								><svg
									t="1666093305685"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="3713"
									width="14"
									height="14"
								>
									<path
										d="M512 992C246.912 992 32 777.088 32 512 32 246.912 246.912 32 512 32c265.088 0 480 214.912 480 480 0 265.088-214.912 480-480 480z m0-64c229.76 0 416-186.24 416-416S741.76 96 512 96 96 282.24 96 512s186.24 416 416 416z"
										p-id="3714"
										fill="#f93684"
									></path>
									<path
										d="M741.216 344a32 32 0 0 1 46.816 43.616l-315.296 338.208a32 32 0 0 1-43.968 2.688l-193.344-162.368a32 32 0 1 1 41.152-48.992l170.08 142.816 294.56-316z"
										p-id="3715"
										fill="#f93684"
									></path></svg
							></span>
							允许音频提取
						</div>
					</div>
					<div class="content">
						<div>教师</div>
						<div>:</div>
						<div>小影老师</div>
					</div>
					<div class="content">
						<div>课程类型</div>
						<div>:</div>
						<div>舞蹈组合</div>
					</div>
					<div class="content">
						<div>难易度</div>
						<div>:</div>
						<div>零基础</div>
					</div>
					<div class="content">
						<div>学习目标</div>
						<div>:</div>
						<div>
							气质提升，易于自学，静心修性，个人提升，娱乐才艺，节奏协调
						</div>
					</div>
					<div class="summary" :class="isOpen ? 'new_detail' : 'default'">
						<div>
							中国古典舞从简单的兰花指，托掌，按掌，山膀、提襟、顺风旗等手位到身韵所包含的提、沉、冲、靠等要素都是古典舞的基本元素，这支组合讲解简单明了，易懂易学，是古典舞最基础的教学参考之一，具体的发力方法和基本的要素要点都在视频里又专门的讲解，希望对每一位舞蹈初学者有所帮助，谢谢大家的支持！
						</div>
						<el-button
							type="text"
							style="color: #f93684; font-size: 14px"
							@click="isOpen = !isOpen"
							><i :class="isOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'">{{
								isOpen ? "收起" : "展开"
							}}</i></el-button
						>
					</div>
				</div>
			</template>
			<template v-if="count == 2">
				<div class="contentWra">
					<p>该商品评价：<span>暂无评价</span></p>
					<div class="sort">
						<ul>
							<li :class="{ flog: flog == 1 }" @click="flog = 1">全部(0)</li>
							<li :class="{ flog: flog == 2 }" @click="flog = 2">近90天(0)</li>
							<li :class="{ flog: flog == 3 }" @click="flog = 3">五星(0)</li>
							<li :class="{ flog: flog == 4 }" @click="flog = 4">四星(0)</li>
							<li :class="{ flog: flog == 5 }" @click="flog = 5">三星(0)</li>
							<li :class="{ flog: flog == 6 }" @click="flog = 6">二星(0)</li>
							<li :class="{ flog: flog == 7 }" @click="flog = 7">一星(0)</li>
						</ul>
					</div>
					<div class="msg">
						<img
							src="https://rs.dance365.com/img/no_message@3x.2f295517.png"
							style="width: 200px; height: 200px; margin: 0 auto"
						/>
						<p>暂无评价</p>
					</div>
				</div>
			</template>
			<template v-if="count == 3">
				<div class="contentWra">
					<div class="after">
						<p>
							1.本商品为虚拟商品，购买后，不支持退款、换货、转让，不提供原文件、不支持下载。
						</p>
						<p>
							2.本商品购买后请加入“练习室”并缓存于其中，即可长期观看、学习和练习，且无需网络流量。
						</p>
						<p>
							3.本商品由【杭州奥腾舞艺舞蹈培训】提供版权，版权所有、侵权必究！
						</p>
						<p>
							4.您对本商品若存疑问（如：时长、配套音频等细节），请先阅读商品详情页、并咨询卖家，了解清晰后再购买。
						</p>
					</div>
				</div>
			</template>
		</div>
		<div class="serviceWra">
			<div class="service">
				<div class="item">
					<el-badge :value="value1">
						<el-button
							color="#ffeaf2"
							round
							:class="{ pick: pick1 == 1 }"
							@click.once="change1"
							>求音乐
						</el-button>
					</el-badge>
				</div>
				<div class="item">
					<el-badge :value="value2">
						<el-button
							color="#ffeaf2"
							round
							@click.once="change2"
							:class="{ pick: pick2 == 1 }"
							>求配套用品
						</el-button>
					</el-badge>
				</div>
				<div class="item">
					<el-badge :value="value3">
						<el-button
							color="#ffeaf2"
							size="default"
							round
							@click.once="change3"
							:class="{ pick: pick3 == 1 }"
							>求线下课</el-button
						>
					</el-badge>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue"
let count = ref(1)

let flog = ref(1)
let isOpen = ref(false)
let value1 = ref(12)
let value2 = ref(0)
let value3 = ref(34)
let pick1 = ref(0)
let pick2 = ref(0)
let pick3 = ref(0)
let word = ref("展开")

const change3 = () => {
	pick3.value = 1
	value3.value += 1
}
const change2 = () => {
	pick2.value = 1
	value2.value += 1
}
const change1 = () => {
	pick1.value = 1
	value1.value += 1
}
</script>

<style scoped>
.back {
	margin: 0 auto;
	background-color: #eee;
}

.titleWra {
	margin: 0 auto;
	width: 1200px;
	background-color: white;
	height: 110px;
	border-bottom: 1px solid #f5f7f9;
	padding-left: 90px;
	box-sizing: border-box;
}

.pick {
	color: #f93684;
}

.titleItem {
	display: inline-block;
	font-size: 24px;
	padding: 39px 24px;
	text-align: center;
	color: #7d8090;
}

.titleWra .active {
	border-bottom: #f93684 3px solid;
	color: #111;
}

.detailWra {
	margin: 0 auto;
	width: 1200px;
	padding: 30px 114px;
	background-color: white;
	box-sizing: border-box;
}

.contentWra {
	padding: 20px 0 30px;
}

.contentWra .msg {
	text-align: center;
	color: rgb(177, 181, 193);
}

.after p {
	color: #111;
	font-size: 16px;
}

.content .black {
	color: #111;
}

ul li {
	float: left;
}

.flog {
	color: #f93684;
	border-bottom: 2px solid #f93684;
	padding-bottom: 13px;
}

.sort {
	width: 972px;
	height: 40px;
	padding-top: 20px;
	border-bottom: 2px solid #eee;
}

ul li {
	font-size: 20px;
	color: #111;
	margin-right: 30px;
}

.content div {
	display: inline-block;
	color: #7d8090;
	font-size: 14px;
	margin-bottom: 20px;
}

.contentWra p {
	margin: 20px 0;
	font-size: 20px;
}

.contentWra p span {
	color: #f93684;
}

.content div:first-child {
	width: 58px;
	text-align-last: justify;
}

.content div:nth-child(2) {
	width: 16px;
}

.summary {
	margin: 14px 0;
}

.content .pink {
	color: #f93684;
}

.serviceWra {
	margin: 0 auto;
	box-sizing: border-box;
	width: 1200px;
	background-color: #eee;
	padding-top: 20px;
}

.service {
	height: 70px;
	background-color: white;
	padding-left: 90px;
}

.item {
	display: inline-block;
	padding-right: 40px;
	margin-top: 20px;
}
.new_detail {
	padding: 5px 50px 5px 0;
	font-size: 14px;
}
.default {
	padding: 5px 50px 5px 0;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
}
</style>
